<template>
	<div class="main" style="background: #fff;">
		<div style="width: 7.5rem;height: 100vh;background: #fff;">
			<scroller>
				<div class="payOuterWrapSuc flex-h">
					<div class="backSuc">
					
						<div class="top" @click="commonJs.funs('')">
							<img class="imgIcon" src="~/static/images/whitearrow.png" alt="">
						</div>
						<h2>支付成功</h2>
					</div>
					<!-- 	<span class="listspSuc">服务内容</span> -->
					<div class="payWrapSuc">
						<div class="payBoxsSuc">
							<!-- <span class="listsp">服务内容</span> -->
							<div class="listboxSuc">
								<span class="listTite">以下服务您已拥有</span>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成生涯测评综合结果</b><span class="sp2"><em
										 class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成优势科目测评综合结果</b><span class="sp2"><em
										 class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成最佳选课方案</b><span class="sp2"><em
										 class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成生涯测评单项结果</b><span class="sp2"><em
										 class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看生涯测评单项和综合结果</b><span class="sp2"><em
										 class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看优势科目测评综合结果</b><span class="sp2"><em
										 class="ee1">不限次</em><em class="ee2"></em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看最佳选课方案</b><span class="sp2"><em
										 class="ee1">不限次</em><em class="ee2"></em></span></div>
							</div>
							<div class="flex-h tidsSuc">
								<span class="sp1">有效期</span>
								<span class="flex1 sp2">2019-12-12 至 2019-12-12</span>
							</div>
						</div>


					</div>
					<div class="payBotSuc">

						<span class="pay2sp">完成开通</span>
					</div>
				</div>
			</scroller>
		</div>
	</div>
</template>
<script>
	import ls from 'store2';
	export default {
		head: {
			title: '支付'
		},
		components: {
		},
		data() {
			return {
				showNext: false,
				userType: ls.get('yxkData').userType,
			}
		},
		created() {
			this.commonJs.gologins();
		},
		mounted: function() {
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}
		},
		destroyed() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		watch: {

		},

		methods: {

			fun() {
				this.$router.replace({
					path: ''

				})

			},




		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.payOuterWrapSuc {
		width: 7.5rem;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		overflow: hidden;
			.top {
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
		
			.imgIcon {
				width: 0.4rem;
				height: 0.4rem;
			}
		
		}
		.listspSuc {
			border-top: 1px solid rgba(238, 238, 238, 1);
			padding: 0.4rem 0 0.2rem 0.32rem;
			font-size: 0.3rem;
			color: rgba(187, 187, 187, 1);
			display: block;
			text-align: left;
			width: 100%;
			box-sizing: border-box;
		}

		.payWrapSuc {
			flex: 1;
			padding: 0 0.3rem;
			width: 7.5rem;
			box-sizing: border-box;

			.payBoxsSuc {
				width: 100%;
				height: 100%;



				.listboxSuc {

					height: 6.5rem;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
					border-radius: 0.2rem;
					width: 100%;
					padding: 0.2rem;
					box-sizing: border-box;
					margin-top: -0.4rem;

					.listTite {
						display: block;
						height: 0.8rem;
						width: 100%;
						line-height: 0.8rem;
						text-align: center;
						font-size: 0.3rem;
						font-weight: bold;
						color: rgba(187, 187, 187, 1);
					}

					.listds {
						width: 100%;
						height: 0.7rem;
						line-height: 0.7rem;

						.sp {
							width: 0.6rem;
							height: 0.7rem;

							i {
								display: block;
								width: 0.2rem;
								height: 0.2rem;
								margin: 0.25rem auto;
								// background: rgba(108, 191, 32, 1);
								border-radius: 0.06rem;

								background: url('~/static/images/gougou.png') no-repeat;
								background-size: 100% 100%;
							}
						}

						.sbs {
							line-height: 0.7rem;
							height: 0.7rem;
							font-size: 0.3rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

						.sp2 {
							height: 0.7rem;
							line-height: 0.7rem;

							.ee1 {
								font-size: 0.3rem;
								font-weight: bold;
								color: rgba(108, 191, 32, 1);
							}

							.ee2 {
								font-size: 0.24rem;
								font-weight: bold;
								color: rgba(187, 187, 187, 1);
								margin-left: 0.05rem;
							}
						}

					}
				}

				.tidsSuc {
					width: 100%;
					height: 1rem;
					padding: 0.2rem;
					box-sizing: border-box;

					.sp1 {
						font-size: 0.3rem;
						color: rgba(187, 187, 187, 1);
						line-height: 1rem;
					}

					.sp2 {
						text-align: right;
						font-size: 0.3rem;
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
						line-height: 1rem;
					}
				}

			}
		}

		.payBotSuc {
			width: 100%;
			height: 1.3rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			overflow: hidden;

			.pay2sp {
				width: 3.5rem;
				display: block;
				margin: 0 auto;
				height: 1rem;
				background: rgba(108, 191, 32, 1);
				box-shadow: 0px 0.1rem 0.2rem -01rem rgba(108, 191, 32, 0.5);
				border-radius: 0.1rem;
				font-size: 0.3rem;
				font-weight: 600;
				color: rgba(255, 255, 255, 1);
				line-height: 1rem;
				text-align: center;
			}
		}
	}

	.backSuc {
		width: 100%;
		height: 2.8rem;
		background: url('~/static/images/Masks.png') no-repeat;
		background-size: 100% 100%;

		h2 {
			padding: 0 0.3rem;
			box-sizing: border-box;
			display: block;
			height: 0.8rem;
			font-size: 0.44rem;
			margin-top: 0.2rem;
			text-align: center;
			font-weight: bold;
			color: #fff;
			line-height: 0.8rem;
		}
	}
</style>
